<template>
  <div>
    显示消息：{{ mes }}
    <el-input v-model="sendsms"></el-input>
    <el-button @click="send">submit</el-button>
    <div class="table-box">
    <van-row class="th-row">
        <van-col :span="24/dataList.title.length" v-for="warn in dataList.title" :key="warn">
        {{warn}}
        </van-col> 
    </van-row>
    <van-row class="tb-row" v-for="(wb,index) in mes" :key="index" 
    :style="{background:wb.status == 1 ?'#fff':'#FF0000'}">
    <van-col :span="24/Object.keys(wb).length" v-for="item in Object.keys(wb)" :key="item">{{wb[item]}} </van-col>
    </van-row>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      mes: [],
      ws: "",
      sendsms: "",
      dataList:{
        title:["id","名字","最低温度","最高温度","状态","当前温度"]
      },
      color:"red"
    };
  },
  methods: {
    initWebsocket() {
      this.ws = new WebSocket("ws://localhost:8000/ws?id=1");
      this.ws.onopen = function () {
        alert("success");
      };
      this.ws.onmessage = (data)=>{
        // console.log(data.data)
        this.mes=JSON.parse(data.data)
      }

      this.ws.onclose = function () {
        alert("close");
      };
    },
    send() {
      this.axios.get("http://127.0.0.1:8000/gree?id=1")
    },
  },
  mounted() {
    this.initWebsocket();
    this.send()
  },
};
</script>
  
<style>
.table-box{
    margin: 12px 0px;
}
.th-row{
     height: 56px;
     line-height: 56px;
     background: #EBF1F7;
     padding: 0px 12px;
   }
.tb-row{
    height: 56px;
    line-height: 56px;
    padding: 0px 12px;
}
</style>